<template>
	<!--穿梭框-->
	<div class="table">
		<!--<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-menu"></i>政务百科</el-breadcrumb-item>
				<el-breadcrumb-item>事项维护</el-breadcrumb-item>
				<el-breadcrumb-item>批量添加</el-breadcrumb-item>
			</el-breadcrumb>
		</div>-->
		<div class="headbox clearfix">
			<search @test="searchFun"></search>
		</div>
		<div class="left list1 list">
			<div class="list-title">请选择需要批量增加的事项</div>
			<el-table size="medium" :data="list1" @selection-change="list1Qx" lazy :load="load" row-key="itemCode">
				<el-table-column type="selection" width="80">
				</el-table-column>
				<el-table-column prop="itemCodeProd" label="事项编号">
				</el-table-column>
				<el-table-column prop="itemName" label="事项名称">
				</el-table-column>
				<el-table-column prop="diquarea" label="所属地区">
				</el-table-column>
			</el-table>
			<div class="page">
				<el-pagination @size-change="list1Size" @current-change="list1Current" :current-page="page.current" :page-sizes="[10, 20, 30, 40]"
				 :page-size="page.size" layout="total, sizes, prev, pager, next" :total="page.total">
				</el-pagination>
			</div>
		</div>
		<div class="list_zhong left">
			<el-button type="primary" @click="chuansuo">选择<i class="el-icon-d-arrow-right el-icon--right"></i></el-button>
			<el-button type="danger" @click="yichu" icon="el-icon-d-arrow-left">移除</el-button>
			<el-button type="primary" @click="queding">确定</el-button>
			<el-button type="danger" @click="fh">返回</el-button>
		</div>
		<div class="left list2 list">
			<div class="list-title">已选择事项</div>
			<el-table size="medium" :data="list2" @selection-change="list2Qx" row-key="itemCode" lazy :load="load">
				<el-table-column type="selection" width="80">
				</el-table-column>
				<el-table-column prop="itemCodeProd" label="事项编号">
				</el-table-column>
				<el-table-column prop="itemName" label="事项名称">
				</el-table-column>
				<el-table-column prop="diquarea" label="所属地区">
				</el-table-column>
			</el-table>
			<div class="page" style="display: block; width: 100%;margin-bottom: 10px;">
				<el-pagination @size-change="list2Size" @current-change="list2Current" :current-page="page1.current" :page-sizes="[10, 20, 30, 40]"
				 :page-size="page1.size" layout="total, sizes, prev, pager, next" :total="page1.total">
				</el-pagination>
			</div>

		</div>
	</div>
</template>
<script>
	import search from './search.vue';
	export default {
		name: 'piliang',
		components: {
			search
		},
		data() {
			return {
				getRowKeys(row) { //事项多选的key值
					return row.id;
				},
				page: {
					current: 1, //当前页数
					size: 10, //每页显示条数
					total: 0, //总条数
				},
				page1: {
					current: 1, //当前页数
					size: 10, //每页显示条数
					total: 0, //总条数
				},
				list1: [], //得到数据
				list2: [], //穿梭后
				cs: [], //list1选中--主
				sc: [], //list2选中
				diqu: {
					shi: [],
					xian: []
				},
				xzdiqu: {
					shi: '',
					xian: ''
				}
			};
		},
		mounted() {
			this.getData()
		},
		methods: {
			fh() {
				this.$router.push({
					path: '/shixiang'
				})
			},
			yichu() {
				if (this.sc.length == 0) {
					return this.$message({
						message: '请选择需要移除的事项',
						type: 'warning'
					});
				}
				for (var a in this.sc) {
					var sc = this.sc[a]
					for (var i in this.list2) {
						var list2 = this.list2[i]
						if (sc == list2) {
							this.list2.splice(i, 1)
							this.page1.total = this.list2.length
						}
					}
				}
			},
			load(tree, treeNode, resolve) {
				var _this = this;
				this.$get("shixiang/item/catalog/childs/" + tree.itemCode).then(res => {
					var data = res.data.data;
					for (var i = 0; i < data.length; i++) {
						for (var a in _this.list2) {
							data[i].diquarea = data[i].areaName.split(",")[0]
							data[i].pCode = tree.itemCode
							if (_this.list2[a].itemCode == data[i].itemCode) {
								_this.list2.splice(a, 1)
							}
						}
					}

					resolve(data)
				})
			},
			chuansuo() {
				if (this.cs.length == 0) {
					return this.$message({
						message: '请选择需要转移的事项',
						type: 'warning'
					});
				}
				var c = this.list2.concat(this.cs);
				this.list2 = this.uniq(c);
				this.page1.total = this.list2.length
			},
			list1Size(val) {
				this.page.size = val;
				this.getData()
			},
			list1Current(val) {
				this.page.current = val;
				this.getData()
			},
			list2Size(val) {
				this.page1.size = val;
			},
			list2Current(val) {
				this.page1.current = val;
			},
			list1Qx(val) {
				this.cs = val
			},
			list2Qx(val) {
				this.sc = val
			},
			searchFun(val) {
				this.page = this.extend(val, this.page);
				this.getData()
			},
			getData() {
				this.$post('/item/catalogs', this.page).then(r => {
					this.list1 = r.data.data.records;
					this.page.total = r.data.data.total;
					for (var i = 0; i < this.list1.length; i++) {
						this.list1[i].diquarea = this.list1[i].areaName.split(",")[0]
					}
					this.cs = [];
					this.sc = [];
				})
			},
			queding() {
				if (this.list2.length == 0) {
					return this.$message({
						message: '请选择进行操作的事项',
						type: 'warning'
					});
				}
				for (var i in this.list2) {
					if (this.list2[i].diquarea) {
						delete this.list2[i].diquarea
					}
				}
				this.$emit("test", this.list2)
			}
		}
	};
</script>

<style scoped>
	.list {
		width: 45%;
		min-height: 530px;
		border: solid 1px rgba(216, 216, 216, 1);
		padding: 10px;
		margin-top: 30px;
		background:#fff;
	}

	.list-title {
		font-size: 14px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 20px;
		margin-bottom: 10px;
	}

	.list-title:before {
		display: block;
		content: '';
		width: 6px;
		height: 23px;
		background: rgba(15, 121, 212, 1);
		float: left;
		margin-right: 10px;
	}

	.list_zhong {
		width: 10%;
		text-align: center;
		background:#fff;
	}

	.list_zhong button:first-child {
		margin-top: 100px;
	}

	.list_zhong button {
		margin-top: 100px;
	}

	.list_zhong button:last-child {
		margin-top: 50px;
	}
</style>
